<template>
	<top-blank></top-blank>
	<top-common @backPage="backPage" :titleContent="titleContent"></top-common>

	<view class="equipment-box">
		<view class="equipment-model">设备型号</view>
		<view class="equipment-model-value">{{equipmentModelValue}}</view>
	</view>

	<view class="accessories-list">
		<view class="accessories-list-title">配件列表</view>
		<scroll-view scroll-y="true" class="accessories-list-content">
			<view v-for="(item,index) in partListData">
				<accessories-list-item :partName="item.partName" :accessorieTitle="item.partName"
					:accessoriePrice="item.part.price" @changeValue="changeValue">
				</accessories-list-item>
			</view>
		</scroll-view>
	</view>

	<view class="bottomBtn">
		<bottom-submit title="选件完成" @submitMes="submitMes"></bottom-submit>
	</view>
</template>

<script>
	import MyStore from '@/store/index.js'
	import config from "@/config"; // 导入配置文件
	// 基本路径
	const baseURL = config.baseURL;

	export default {
		data() {
			return {
				titleContent: "选件中",
				equipmentModelValue: "", //设备型号
				partListData: [], //该设备型号下的配件列表
				accessoriesList: [], //选件完成时提交的数据列表
				orderId: -100,
			};
		},
		methods: {
			changeValue(value, partName) {
				// 使用findIndex来检查partName是否已经存在于accessoriesList中
				const index = this.accessoriesList.findIndex(item => item.partName === partName);

				if (index !== -1) {
					// 如果存在，增加数量（amount）
					this.accessoriesList[index].amount += 1;
				} else {
					// 如果不存在，添加一个新条目
					this.accessoriesList.push({
						orderId: this.orderId,
						partName: partName,
						amount: value
					});
				}
			},
			submitMes() {
				let that = this;
				const token = uni.getStorageSync('token');
				// 插入表tb_order_part
				uni.request({
					url: `${baseURL}/orderPart/addlist?id=${that.orderId}`,
					method: 'POST',
					data: that.accessoriesList,
					header: {
						"token": token
					},
					success(res) {
						if (res.data.code == 200) {
							uni.redirectTo({
								url: '/pages/maintenance-worker/maintenance-worker'
							})
						} else if(res.data.code == 400){
							console.log(res.data.message);
						}
					},
					fail(err) {
						console.log("选件完成请求失败", err);
					}

				})
			},
			backPage() {
				uni.redirectTo({
					url: '/pages/maintenance-worker/maintenance-worker'
				})
			}
		},
		onLoad() {
			let orderId = MyStore.getters.getClickOrderStailsId;
			this.orderId = orderId;
			let machineModelNumber = MyStore.getters.getClickOrderStailsmachineModelNumber;
			this.equipmentModelValue = machineModelNumber
			if (machineModelNumber === "") {
				uni.redirectTo({
					url: '/pages/maintenance-worker/maintenance-worker'
				})
			}
			const token = uni.getStorageSync('token');
			let that = this;
			uni.request({
				url: `${baseURL}/machine-part/1`,
				method: "POST",
				data: {
					"machineModelNumber": machineModelNumber
				},
				header: {
					"token": token
				},
				success(res) {
					that.partListData = res.data.data.records;
				},
				fail(err) {
					console.log("根据设备型号获取配件失败", err);
				}
			})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #333333;
	}

	.equipment-box {
		background-color: #4f4f4f;
		color: #ffb612;
		display: flex;
		justify-content: space-between;
		margin: 40rpx 20rpx 10rpx;
		padding: 20rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-left: 2rpx solid #ffb612;
		border-right: 2rpx solid #ffb612;

		.equipment-model {
			font-weight: 600;
		}
	}

	.accessories-list {
		background-color: #4f4f4f;
		color: #ffb612;
		height: 62.5vh;
		margin: 40rpx 20rpx 10rpx;
		padding: 20rpx;
		border-left: 2rpx solid #ffb612;
		border-right: 2rpx solid #ffb612;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;

		.accessories-list-title {
			border-bottom: 1px solid #ffb612;
			padding-bottom: 10rpx;
			font-weight: 600;
		}

		.accessories-list-content {
			margin-top: 20rpx;
			height: 50vh;
		}
	}
</style>
